<template>
    <div>
        <!-- 用户列表 -->
        <h1>商品分类</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 添加按钮 -->
            <div class="btn" style="margin-bottom: 20px;">
                <el-button type="primary" @click="addList">添加分类</el-button>
            </div>
            <!-- 表格 -->
            <div class="lab">
                <el-table :data="tableData" style="width: 100%" row-key="cat_id" border lazy :load="load"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column type="index" label="#">
                    </el-table-column>
                    <el-table-column prop="cat_name" label="分类名称" width="180">
                    </el-table-column>

                    <el-table-column prop="cat_deleted" label="是否有效" width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.cat_deleted != true" class="el-icon-success"
                                style="color: green;"></span>
                            <span v-else class="el-icon-success" style="color: red;"></span>
                        </template>

                    </el-table-column>

                    <el-table-column prop="ct_level" label="排序" width="180">
                        <el-tag color="#409eff" style="color: #fff;">一级</el-tag>
                    </el-table-column>

                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" class="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" class="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pagenum" :page-sizes="[5, 10, 15, 40]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>


            <!-- 添加分类弹框 -->
            <el-dialog title="添加商品分类" :visible.sync="dialogVisible" width="60%">
                <!-- 验证表单 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 多级分类 -->
                <div class="block">
                    &emsp;&emsp; <span class="demonstration">父级分类</span>&nbsp;
                    <el-cascader :options="options" :props="props" clearable @change="handleChange"></el-cascader>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 修改弹框 -->
            <el-dialog title="添加商品分类" :visible.sync="dialogVisible1" width="60%">
                <!-- 验证表单 -->
                <el-form :model="ruleForm1" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="ruleForm1.name"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm1('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm1('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>
<script>
import { cartlist, addIfy } from '../request/Api'
export default {
    data() {
        return {
            // 添加表单验证
            ruleForm: {
                name: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
            },

            // 修改表单验证
            ruleForm1: {
                name: '',
            },

            // 表格
            tableData: [],
            
            // 第几页分页
            pagenum: 1,
            // 一个多少条
            total: null,
            // 每页显示多少条
            pageSize: 5,

            // 添加弹框
            dialogVisible: false,
            // 父级分类
            options: [],
            props: {
                checkStrictly: true,
                label: 'cat_name',
                value: 'cat_id',
            },
            // 修改弹框
            dialogVisible1: false,
            // 添加参数存储
            addify: {
                cat_pid:0,
                cat_level:0,
            },
            val:[]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 子菜单触发
        handleChange(value) {
            console.log(value);
            this.val=value
            this.addify.cat_pid = value[value.length - 1];
            this.addify.cat_level = value.length - 1;
        },
        // 商品列表渲染
        getList() {
            cartlist({params:{pagesize:this.pageSize,pagenum:this.pagenum,type:[]}}).then(res => {
                this.addify = res.data.data.result
                this.options = res.data.data.result
                this.tableData = res.data.data.result
                this.total = res.data.data.total
                console.log(res);
            })
        },
        // 表单验证// 确定修改
        submitForm1(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible1 = false
                    this.ruleForm.name = ''
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm1(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible1 = false
        },

        // 添加按钮
        addList() {
            this.dialogVisible = true
        },
        // 表格
        load(tree, treeNode, resolve) {
            setTimeout(() => {
                resolve()
            }, 1000)
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagenum = val
            this.getList()
        },
        // 编辑删除
        handleEdit(index, row) {
            console.log(index, row);
            this.dialogVisible1 = true
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 添加表单验证
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.val);
                    let obj = {
                        cat_pid: this.addify.cat_pid,
                        cat_name: this.ruleForm.name,
                        cat_level: this.addify.cat_level
                    }
                    console.log(obj);
                    if(this.val.length==0){
                        console.log(obj);
                        obj = {
                        cat_pid: 0,
                        cat_name: this.ruleForm.name,
                        cat_level: 0
                    
                    }
                
                    addIfy(obj).then(res => {
                        console.log(res);
                        this.getList()
                    })
                    }else{
                        console.log(obj);
                        addIfy(obj).then(res => {
                        console.log(res);
                        this.getList()
                    })
                    }
                    // addIfy(obj).then(res => {
                    //     console.log(res);
                    //     this.getList()
                    // })
                    // this.dialogVisible = false
                    // this.dialogVisible1 = false
                    // this.ruleForm.name = ''
                } else {

                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
            this.dialogVisible1 = false
        }

    },
}
</script>
<style lang="scss" scoped>
.box-card {
    width: 96%;
    margin: 20px auto;

    .block {
        float: left;
        margin: 20px 0;
    }

    .btn {
        float: left;
    }
}
</style>